<template>
  <div class="login-container">
    <div class="titles">
      <h3 class="title" :class="{ active: current.type === 1 }" @click="current.type = 1">手机登录</h3>
      <h3 class="title" :class="{ active: current.type === 2 }" @click="current.type = 2">邮箱登录</h3>
    </div>

    <!-- 动态组件 -->
    <keep-alive>
      <component :is="component[current.type]" @login="handleLogin" />
    </keep-alive>

    <div class="links">
      <router-link to="/register">免费注册</router-link>
    </div>
  </div>
</template>

<script setup>
import { ref,reactive,watch } from "vue";
import PhoneLogin from "./PhoneLogin.vue";
import EmailLogin from "./EmailLogin.vue";
import { useUserStore } from "@/stores/user";
import { emailLoginAPI,passwordLoginAPI } from "@/apis/user";
import { useCartStore } from "@/stores/cart";
import { getCartListAPI } from "@/apis/cart";
import { useAddressStore } from "@/stores/address";
import { getAddressListAPI } from "@/apis/address";
import { useRouter } from 'vue-router';

const router = useRouter();
const userStore = useUserStore();
const cartStore = useCartStore();
const addressStore = useAddressStore();
const component = {
  1: PhoneLogin,
  2: EmailLogin,
};
const current = reactive({
  type: 1
});


const initUser = async (res) =>  {
  userStore.setUserInfo(res.userInfo);
  // 将token保存到localStorage
  localStorage.setItem("user_token", res.Authorization);
  await getCartListAPI().then((res) => {
    cartStore.setCartInfo(res);
  });
  await getAddressListAPI().then((res) => {
    addressStore.setAddressList(res.records);
  });
};

const handleLogin = (loginData) => {
  // 密码登录
  if(current.type === 1) {
    passwordLoginAPI(loginData)
        .then((res) => {
          if(res.status === 200) {
            // 跳转到首页
            router.push("/");
            initUser(res.data);
            // 提示用户登录成功
            ElMessage({
              message: "登录成功",
              type: "success",
            });
          }

          else {
            ElMessage({
              message: res.message,
              type: "danger",
            });
          }


        })
        .catch((err) => {
          console.log(err);
        });
  }
  // 邮箱登录
  else if(current.type === 2){
    emailLoginAPI(loginData)
        .then((res) => {
          // 跳转到首页
          router.push("/");
          initUser(res.data);
          // 提示用户登录成功
          ElMessage({
            message: "登录成功",
            type: "success",
          });
        })
        .catch((err) => {
          console.log(err);
        });
  }
}
</script>


<style scoped lang="scss">
.titles {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;

  .title {
    cursor: pointer;
    margin: 0 1rem;
    border-bottom: 2px solid transparent;
    transition: border-bottom-color 0.3s;

    &.active {
      border-bottom-color: black;
    }
  }
}
.login-container {
  width: 25rem;
  margin: auto;
  padding: 2rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  .login-switch {
    margin-bottom: 2rem;
  }

  .links {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
  }
}
</style>
